<template>
    <div class="my">
        <div class="head">个人中心</div>
        <div class="content">
            <div class="username">
                <span>{{ userInfo.nickname }}</span>
                <p>ID: {{ userInfo.id }}</p>
            </div>
            <ul class="functionList">
                <li class="nickname" @click="nickname">
                    <i class="iconfont icon-xiugainicheng1"></i>
                    <span>修改昵称</span>
                    <van-icon name="arrow" />
                </li>
                <li class="password">
                    <i class="iconfont icon-xiugaimima"></i>
                    <span>修改密码</span>
                    <van-icon name="arrow" />
                </li>
                <li class="safe">
                    <i class="iconfont icon-zhanghaoanquan"></i>
                    <span>账号安全</span>
                    <van-icon name="arrow" />
                </li>
                <li class="self">
                    <i class="iconfont icon-yinsishezhi1"></i>
                    <span>隐私设置</span>
                    <van-icon name="arrow" />
                </li>
                <li class="notify">
                    <i class="iconfont icon-tongzhishezhi"></i>
                    <span>通知设置</span>
                    <van-icon name="arrow" />
                </li>
                <li class="aboutus">
                    <i class="iconfont icon-guanyuwomen"></i>
                    <span>关于我们</span>
                    <van-icon name="arrow" />
                </li>
            </ul>
            <van-button @click="logOut" class="btn" type="danger">退出登陆</van-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showConfirmDialog } from 'vant';


const userInfo = ref(JSON.parse(localStorage.getItem('userInfo')));
const router = useRouter()

// 退出登陆
const logOut = () => {
    showConfirmDialog({
        message:
            '您确认要退出吗？',
    })
        .then(() => {
            // on confirm
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token')
            // 跳转到登陆页
            router.push('/login')
        })
        .catch(() => {
            // on cancel
        });

}

// 修改昵称
const nickname = async () => {
    const res = await alterNickname()
}
</script>

<style lang="less" scoped>
.my {

    .head {
        font-weight: 500;
        font-size: 0.48rem;
        color: #000000;
        line-height: 0.75rem;
        background-color: #fff;
        padding: .2133rem 0;
        text-align: center;
    }

    .content {
        height: calc(100vh - 2.4267rem);
        padding: 0 .4267rem;
        background-color: #F9FAFB;
        overflow: hidden;

        .username {
            padding: 0.64rem;
            background-color: #3176FF;
            border-radius: .32rem;
            margin-top: .4267rem;

            span {
                font-weight: 500;
                font-size: 0.64rem;
                color: #FFFFFF;
                line-height: 0.85rem;
            }

            p {
                font-weight: 400;
                font-size: 0.37rem;
                color: #B5CEFF;
                line-height: 0.53rem;
                margin-top: 0.21rem;
            }
        }

        .functionList {
            margin-top: .64rem;

            li {
                padding: 0.48rem;
                background-color: #fff;
                border-bottom: 1px solid #F3F4F6;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .iconfont {
                    color: #3176FF;
                    margin-right: .3467rem;
                }

                span {
                    flex: 2;
                    font-weight: 400;
                    font-size: 0.37rem;
                    color: #000000;
                    line-height: 0.56rem;
                }
            }
        }

        .btn {
            margin-top: .64rem;
            width: 100%;
            background-color: #FF6B6B;
            border-radius: .1067rem;
        }
    }
}
</style>